<template>
  <div class="icons border-bottom">
    <swiper :options='swiperOption' v-if="slideShow">
      <swiper-slide v-for="(item,index) in pages" :key="index">
        <div class="icon" v-for="icon in item" :key="icon.id">
          <div class="icon-img-wrapper">
            <img :src="icon.imgUrl" alt="" class="icon-img">
          </div>
          <div class="desc">{{icon.desc}}</div>
        </div>
      </swiper-slide>  
      <div class="swiper-pagination"  slot="pagination">
        <span class="swiper-pagination-bullet"></span> 
      </div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name:'Icons',
  props: {
    icons: Array
  },
  data () {
    return {
      swiperOption : {
        pagination: '.swiper-pagination'
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  computed: {
    pages () {
      const pages = []
      this.icons.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if(!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    },
    slideShow () {
      return this.icons !== undefined && this.icons.length > 0
    }
  }
}
</script>

<style lang="stylus" scoped>
.icons >>> .swiper-pagination-bullet-active
  background skyblue 
.icons
  // padding-top 10px
  width 100%
  height 0
  padding-bottom 50%
  overflow hidden
  font-size .28rem
  background #fff
  .swiper-container
    padding-bottom 30px
    padding-top .2rem
  .icon
    width 25%
    background #fff
    float left
    height 1.5rem
    text-align center
    padding-top .1rem

    .icon-img-wrapper
      display inline-block
      height 1.1rem
      width 1.1rem
      .icon-img
        width 100%
        height 100%
    .desc
      height .4rem
      line-height .4rem
</style>